<template>
    <view>
        <view v-if="loading" class="skeleton" :class="{ animate: animate }" :style="{flexDirection: direction}">
            <view
                v-if="showAvatar"
                class="skeleton-avatar"
                :class="[avatarShape]"
                :style="{ width: avatarSize, height: avatarSize, marginRight: direction === 'column' ? '0' : avatarRight }"
            ></view>
            <view class="skeleton-content">
                <view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth, marginTop: (direction === 'column' ? '26rpx' : '0') }"></view>
                <view class="skeleton-rows">
                    <view
                        class="skeleton-row-item"
                        v-for="(item, index) in rowList"
                        :key="index"
                        :style="{ width: item.width }"
                    ></view>
                </view>
            </view>
        </view>
        <view v-else><slot></slot></view>
    </view>
</template>

<script>
	const DEFAULT_ROW_WIDTH = '100%';
	const DEFAULT_LAST_ROW_WIDTH = '60%';

	export default {
		props: {
			loading: {
				type: Boolean,
				default: true,
			},
			showAvatar: {
				type: Boolean,
				default: true,
			},
			avatarSize: {
				type: String,
				default: '50px',
			},
			avatarShape: {
				type: String,
				default: 'round', // square | round
			},
			avatarRight: {
				type: String,
				default: '16rpx',
			},
			showTitle: {
				type: Boolean,
				default: true,
			},
			titleWidth: {
				type: String,
				default: '70%',
			},
			row: {
				type: Number,
				default: 3,
			},
			animate: {
				type: Boolean,
				default: true,
			},
			direction: {
				type: String,
				default: 'row',
			},
		},
		data() {
			return {}
		},
		computed: {
			rowList() {
				let list = []
				for (let i = 0; i < this.row; i++) {
					list.push({
						width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
					})
				}
				return list
			},
		},
	}
</script>

<style scoped>
    .skeleton {
        display: flex;
        padding: 20rpx;
        --bg-color: #f2f3f5;
        --row-height: 30rpx;
        --row-margin-top: 26rpx;
    }
    .skeleton-avatar {
        flex-shrink: 0;
        background: var(--bg-color);
    }
    .skeleton-avatar.round {
        border-radius: 50%;
    }

    .skeleton-content {
        width: 100%;
    }

    .skeleton-title {
        background-color: var(--bg-color);
        height: var(--row-height);
    }

    .skeleton-title + .skeleton-rows {
        margin-top: var(--row-margin-top);
    }

    .skeleton-rows {
    }

    .skeleton-row-item {
        background-color: var(--bg-color);
        height: var(--row-height);
    }
    .skeleton-row-item:not(:first-child) {
        margin-top: var(--row-margin-top);
    }

    .skeleton.animate {
        animation: skeleton-blink 1.2s ease-in-out infinite;
    }

    @keyframes skeleton-blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
        100% {
            opacity: 1;
        }
    }
</style>
